@import '_variables';

:root {
  --code-ln-wrapper-width: 1.12rem;
  --navbar-height: 1.152rem;
  --navbar-padding-v: 0.224rem;
  --navbar-padding-h: 0.48rem;
  --sidebar-width: 6.4rem;
  --content-width: 14.8rem;
  --homepage-width: 19.2rem;
}
html {
  font-size: 50px;
}

//  _wrapper --- start
.theme-default-content:not(.custom) {
  padding: 0.64rem 0.8rem;
  @media (max-width: $MQNarrow) {
    padding: 0.64rem;
  }
  @media (max-width: $MQMobileNarrow) {
    padding: 0.48rem;
  }
}
//  _wrapper --- end

//  code-group --- start
.code-group__nav {
  margin-top: 0.272rem;
  // 2 * margin + border-radius of <pre> tag
  margin-bottom: calc(-0.544rem - 6px);
  padding-bottom: calc(0.544rem - 6px);
}
@media (max-width: $MQMobileNarrow) {
  .code-group__nav {
    margin-left: -0.48rem;
    margin-right: -0.48rem;
  }
}
//  code-group --- end

//  code --- start
.theme-default-content {
  pre,
  pre[class*='language-'] {
    padding: 0.4rem 0.48rem;
    margin: 0.272rem 0;
  }
}
div[class*='language-'] {
  &::before {
    font-size: 0.24rem;
  }
  .highlight-lines {
    padding-top: 0.416rem;
  }
  &.line-numbers-mode {
    pre {
      padding-left: 0.32rem;
    }
    .line-numbers {
      padding-top: 0.4rem;
    }
  }
}
// narrow mobile
@media (max-width: $MQMobileNarrow) {
  .theme-default-content {
    div[class*='language-'] {
      margin: 0.272rem -0.48rem;
    }
  }
}
//  code --- end

//  custom-container --- start
.custom-container {
  .custom-container-title {
    margin-bottom: -0.128rem;
  }
  &.tip,
  &.warning,
  &.danger {
    padding: 0.032rem 0.48rem;
    border-left-width: 0.16rem;
    margin: 1rem 0;
  }
}
//  custom-container --- end

//  dropdown --- start
.dropdown-wrapper {
  .dropdown-title {
    font-size: 0.288rem;
    line-height: 0.448rem;
    .arrow {
      margin-left: 0.128rem;
    }
  }
  .nav-dropdown {
    .dropdown-item {
      line-height: 0.544rem;
      .dropdown-subtitle {
        margin: 0.144rem 0 0;
        padding: 0.32rem 0 0.144rem 0;
        font-size: 0.288rem;

        & > span {
          padding: 0 0.48rem 0 0.4rem;
        }

      }
      a {
        line-height: 0.544rem;
        padding: 0 0.48rem 0 0.4rem;

      }

    }
  }
}
@media (max-width: $MQMobile) {
  .dropdown-wrapper {
    &.open .dropdown-title {
      margin-bottom: 0.16rem;
    }
    .nav-dropdown {
      .dropdown-item {
        .dropdown-subtitle,
        & > a {
          line-height: 0.64rem;
        }
        .dropdown-subitem {
          padding-left: 0.32rem;
        }
      }
    }
  }
}
@media (min-width: ($MQMobile + 1)) {
  .dropdown-wrapper {
    height: 0.576rem;
    .nav-dropdown {
      padding: 0.192rem 0;
      border-radius: 0.08rem;
    }
  }
}
//  dropdown --- end

//  home --- start
.home {
  padding: var(--navbar-height) 0.64rem 0;
  .hero {
    img {
      margin: 0.96rem auto 0.48rem;
    }
    h1 {
      font-size: 0.96rem;
    }

    h1,
    .description,
    .actions {
      margin: 0.576rem auto;
    }

    .description {
      max-width: 11.2rem;
      font-size: 0.512rem;
    }

    .action-button {
      font-size: 0.384rem;
      padding: 0.256rem 0.512rem;
      &:not(:first-child) {
        margin-left: 0.48rem;
      }
    }
  }

  .features {
    padding: 0.384rem 0;
    margin-top: 0.8rem;
  }

  .feature {
    h2 {
      font-size: 0.448rem;
    }
  }

  .footer {
    padding: 0.8rem;
  }
}

@media (max-width: $MQMobile) {
  .home {
    .feature {
      padding: 0 0.8rem;
    }
  }
}

@media (max-width: $MQMobileNarrow) {
  .home {
    padding-left: 0.48rem;
    padding-right: 0.48rem;
    .hero {
      img {
        margin: 0.64rem auto 0.384rem;
      }
      h1 {
        font-size: 0.64rem;
      }
      h1,
      .description,
      .actions {
        margin: 0.384rem auto;
      }
      .description {
        font-size: 0.384rem;
      }
      .action-button {
        font-size: 0.32rem;
        padding: 0.192rem 0.384rem;
      }
    }
    .feature {
      h2 {
        font-size: 0.4rem;
      }
    }
  }
}
//  home --- end

//  layout --- start
.theme-container {
  &.no-navbar {
    .theme-default-content:not(.custom) > h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 0.48rem;
    }
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  .theme-default-content:not(.custom) > & {
    margin-top: calc(0.16rem - var(--navbar-height));
    padding-top: calc(0.32rem + var(--navbar-height));
    &:first-child {
      margin-bottom: 0.32rem;
      + p,
      + pre,
      + .custom-container {
        margin-top: 0.64rem;
      }
    }
  }
}
.theme-default-content:not(.custom) {
  padding-top: 0;
}
// narrow mobile
@media (max-width: $MQMobileNarrow) {
  h1 {
    font-size: 0.608rem;
  }
}
//  layout --- end

//  navbar --- start
.navbar {
  .site-name {
    font-size: 0.416rem;
  }

  .navbar-links-wrapper {
    font-size: 0.288rem;
  }
}

@media (max-width: $MQMobile) {
  .navbar {
    padding-left: 1.28rem;

    .site-name {
      width: calc(100vw - 3.008rem);
    }
  }
}

/**
 * navbar-links
 */
.navbar-links {
  a {
    line-height: 0.448rem;
  }
  .navbar-links-item {
    margin-left: 0.48rem;
  }
}
.toggle-sidebar-button {
  top: 0.192rem;
  left: 0.32rem;
  padding: 0.192rem;
}
.toggle-sidebar-button .icon {
  width: 0.4rem;
  height: 0.4rem;
}
.toggle-dark-button {
  margin-left: 0.32rem;
  .icon {
    width: 0.4rem;
    height: 0.4rem;
  }
}
//  navbar --- end

// normalize --- start
kbd {
  border: solid 0.048rem var(--c-border-dark);
  border-bottom: solid 0.08rem var(--c-border-dark);
  border-radius: 0.0.048rem;
}

code {
  padding: 0.08rem 0.16rem;
}

blockquote {
  font-size: 0.32rem;
  border-left: 0.0.064rem solid var(--c-border-dark);
  margin: 0.32rem 0;
  padding: 0.08rem 0 0.08rem 0.32rem;

}

h1 {
  font-size: 0.704rem;
}

h2 {
  font-size: 0.528rem;
  padding-bottom: 0.096rem;
}

h3 {
  font-size: 0.432rem;
}

h4 {
  font-size: 0.368rem;
}

h5 {
  font-size: 0.336rem;
}

h6 {
  font-size: 0.32rem;
}

table {
  margin: 0.32rem 0;
}

// normalize --- end

//  page --- start
.page {
  padding-bottom: 0.64rem;
}

.page-meta {
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  .meta-item {
    margin-top: 0.256rem;
  }
  .edit-link {
    margin-right: 0.08rem;
  }
}

.page-nav {
  padding-top: 0.32rem;
  .inner {
    min-height: 0.64rem;
    padding-top: 0.32rem;
  }
}
//  page --- end

//  sidebar --- start
.sidebar {
  .navbar-links {
    padding: 0.16rem 0 0.24rem 0;

    .navbar-links-item {
      line-height: 0.4rem;
      padding: 0.16rem 0 0.16rem 0.48rem;
    }
  }

  .sidebar-links {
    padding: 0.48rem 0;

    > li:not(:first-child) {
      margin-top: 0.24rem;
    }

    .sidebar-sub-items {
      padding-left: 0.32rem;
    }
  }
}

@media (max-width: $MQMobile) {
  .sidebar {
    .navbar-links {
      .dropdown-wrapper
        .nav-dropdown
        .dropdown-item
        a.router-link-active::after {
        top: calc(0.32rem - 2px);
      }
    }

    .sidebar-links {
      padding: 0.32rem 0;
    }
  }
}

.sidebar-heading {
  padding: 0.112rem 0.48rem 0.112rem 0.4rem;
  border-left: 0.08rem solid transparent;
}

.sidebar-item:not(.sidebar-heading) {
  border-left: 0.08rem solid transparent;
  padding: 0.112rem 0.32rem 0.112rem 0.64rem;
  .sidebar-links > &:not(:first-child) {
    margin-top: 0.24rem;
  }

  .sidebar-sub-items & {
    padding: 0.08rem 0.32rem 0.08rem 0.56rem;
  }
}
//  sidebar --- end


.component-shell {
  overflow: auto;
  position: relative,
}

ion-app.iframe-html {
  ion-header {
    ion-toolbar {
      ion-title {
        text-align: center;
      }
    }
  }
  ion-content {
    ion-item {
      overflow: visible;
    }
  }
}

div.back-to-top {
  bottom: 0.64rem;
  right: 0.8rem;
  width: 0.64rem;
  height: 0.384rem;
}

.home .hero .action-button.primary {
  background-color: rgb(1,176,255);
  border-color: rgb(1,176,255);
  &:hover {
    background-color: rgb(1,176,255);
    border-color: rgb(1,176,255);
  }
}
.app-calendar {
  tr {
    border-top: none;
    &:nth-child(2n) {
      background-color: #fff;
    }
  }
  td, th {
    border: none;
  }
}